<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <h3>这是父组件</h3>
        <input type="text" v-model="father">
        <hr>
        <com1 v-bind:son="father"></com1>
    </div>
   
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                father: "father 给son的值"
            },
            //定义子组件
            // 用绑定属性的方法，子组件的属性对应子组件props中的属性，属性的值对应父组件传递的值
            components: {
                com1: {
                    template: `    <div id="temp">
                                        <h3>这是子组件</h3>
                                        <h2>这是接受的父组件传的值</h2>
                                        <h3 style="color: red">{{son}}</h3>
                                        <h4>{{sondata}}</h4>
                                    </div>`,
                    data: function () {
                        return {
                            sondata:this.props['son'],
                        }
                    },
                    // data 和 props的区别
                    // data是一个返回值为对象的方法，props是一个字符串数组
                    // data用来保存组件的私有数据，props保存的是父组件传递过来的数据
                    // data数据可以读可以写，props数据是只读的，可以修改但是会报错 avoid mutate变化
                    props: [
                        'son'
                    ]

                }
            }

        })
    </script>

</body>

</html>